<template>
    <div class="cons">
        <van-nav-bar v-for="item in list" :key="item.id">      
            <i slot="left" class="iconfont icon-sousuo"></i>
            <p slot="title" class="title" v-html="highlight(item,value)" @click="ions(item)"></p>
        </van-nav-bar>
        <!-- <van-nav-bar>      
            <i slot="left" class="iconfont icon-sousuo"></i>
            <p slot="title" class="title">{{value}}</p>
        </van-nav-bar>
        <van-nav-bar>      
            <i slot="left" class="iconfont icon-sousuo"></i>
            <p slot="title" class="title">{{value}}</p>
        </van-nav-bar>
        <van-nav-bar>      
            <i slot="left" class="iconfont icon-sousuo"></i>
            <p slot="title" class="title">{{value}}</p>
        </van-nav-bar> -->
    </div>
</template>
<script>
import { getSearch } from '@/api/search.js'
import { debounce } from 'lodash'
export default {
  data:function(){
    return {       
      list:[]
    }
  },
  props:(['value']),
  watch:{
    value: debounce(async function () {  
      console.log('ss')
      //   if (this.value === null) return    
      this.getSearchs()  
    },1000)
  },
  methods:{
    ions(val){          
      // 获取value值把他传给他父亲
      this.$emit('values',val)
    },
    async getSearchs(){
      console.log(this.value)
      const ons = await getSearch({              
        q: this.value // 搜索关键字
      })
      this.list = ons.data.data.options
      console.log(ons.data.data.options)          
    },
    highlight (source,value) {
      // /searchContent/ 正则表达式中的一切内容都会当做字符串使用
      // 这里可以 new RegExp 方式根据字符串创建一个正则表达式
      // RegExp 是原生 JavaScript 的内置构造函数
      // 参数1：字符串，注意，这里不要加 //
      // 参数2：匹配模式，g 全局，i 忽略大小写
      const reg = new RegExp(value, 'gi')
      return source.replace(reg, `<span style="color: red">${value}</span>`)
    }
  }
}
</script>
<style lang="less">
        .cons{
            .icon-sousuo{
                    font-size: 30px;
                    color: #c9c9c9;
            }
            .title{
                font-size: 25px;
                color: #3296fa;
            }
            .van-nav-bar__title{
                margin: 0px;
                margin-left: 80px;
            }
        }
</style>
